<template>
  <div class="report-list">
    <div class="report-tit">
      <img src="../../../static/images/ReportList_Icon.png" alt="">
      <span>报告列表</span>
    </div>
    <div class="report-con">
      <ul>
        <li v-for="(item, index) in xamReportList"
            :key="index" @click="xamReporHand(index, item.id ,item.apply_id)"
            :class="{'active': nowIndex === index}"
        >
          <div>{{item.apply_name}}</div>
          <div>{{item.time_stamp}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReprotCar',
  props: ['xamReportList'],
  data () {
    return {
      nowIndex: 0
    }
  },
  methods: {
    xamReporHand (index, Id, applyId) {
      this.nowIndex = index
      this.$emit('xamReport', Id)
      this.$emit('labtestReport', applyId)
    }
  }
}
</script>

<style lang="">
  .report-list{
    width: 5.02rem;
    height: 4.22rem;
    padding-left: .3rem;
    background: #fff;
    border-radius: .2rem;
  }
  .report-list .report-tit{
    height: 1.2rem;
    display: flex;
    flex-direction: 'cloumn';
    align-items: center;
    font-size: .3rem;
    color: #1c1c1c;
  }

  .report-tit>img{
    width: .33rem;
    height: .36rem;
    vertical-align: middle;
    margin-right: .18rem;
  }
  .report-con>ul{
    height: 3.02rem;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .report-con>ul::-webkit-scrollbar {
    display: none;
  }
  .report-con>ul>li{
    position: relative;
    padding-left: .42rem;
    margin-bottom: .16rem;
  }
  .report-con>ul>li:before{
    position: absolute;
    content: "";
    display: inline-block;
    width: .12rem;
    height: .12rem;
    border-radius: 50%;
    background-color: #aaaaaa;
    top: 0.25rem;
    left: 0;
    /* transform: translateY(-50%); */
  }
  .report-con>ul .active:before{
    background-color: #27ae9e;
  }
  .report-con>ul .active>div{
    color: #27ae9e;
  }
  .report-con>ul>li>div{
    padding: .04rem 0;
    font-size: 0.24rem;
    line-height: 0.25rem;
    color: #aaa;
  }
</style>
